<script>
import {getWarehouseListByProductAndUserID} from "@/api/warehouse";
import {getUserInfo} from "@/utils/auth";
import {isNotANumberOrEmpty} from "@/utils";

export default {
  props: ["value",],
  data() {
    return {
      options: [],
      innerValue: '',
    }
  },
  watch: {
    value() {
      this.innerValue = this.value;
    },
    innerValue() {
      this.$emit('setValue', this.innerValue);
    },
  },
  mounted() {
  },
  methods: {
    getWarehouseList(productID) {
      console.log("productID: " + productID);
      getWarehouseListByProductAndUserID({
        userID: getUserInfo().userID,
        productID,
      }).then(res => {
        let data = res.data.data;
        let arr = [];

        for (let i = 0; i < data.length; i++) {
          let inventory = data[i].inventory;
          if (isNotANumberOrEmpty(inventory)) {
            inventory = 0;
          }

          arr.push({
            label: `${data[i].warehouseName}`,
            inventory,
            value: data[i],
          });
        }

        if (this.value !== '') {
          this.innerValue = this.value;
        }
        this.options = arr;
      });
    },
  }
}
</script>

<template>
  <el-select v-model="innerValue" style="flex: 1;" value-key="_id"
             filterable placeholder="">
    <el-option v-for="(item, index) in options"
               :key="index" :label="item.label"
               :value="item.value">
      <span>{{item.label}}</span>(<span>{{item.inventory}}</span>)
    </el-option>
  </el-select>
</template>

<style scoped lang="scss">

</style>
